<template>
  <view class="page">
    <Header :title="'我的'"></Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'我的-学习记录'"> </Breadcrumb>
        <view class="content">
          <view class="tabs">
            <view
              class="tabs_item"
              v-for="(item, index) in typeList"
              :key="index"
              :class="{
                active: index === currentIndex,
              }"
              @click="handleChangeType(index)"
            >
              <text>{{ item.name }}</text>
            </view>
          </view>
          <view class="tips"> 今日识记：{{ list.length }}词 </view>
          <view class="list">
            <view class="item" v-for="(item, index) in list" :key="index">
              <view class="item_text"> {{ item.word }} </view>
              <view class="item_text"> {{ item.wordParaphrase }} </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getJrxxWords } from "@/api/sync";
import { parseTime } from "@/libs/utils";
export default {
  components: {},
  data() {
    return {
      typeList: [
        { type: "1", name: "单词速记" },
        { type: "2", name: "个人测评" },
        { type: "3", name: "同步句子" },
        { type: "4", name: "分级阅读" },
        { type: "5", name: "语法速通" },
        { type: "6", name: "写作突破" },
      ],
      currentIndex: 0,
      list: [],
    };
  },
  onLoad() {
    this.getData();
  },
  methods: {
    getData() {
      getJrxxWords(parseTime(new Date(), "{y}-{m}-{d}")).then((res) => {
        this.list = res.data;
      });
    },
    handleChangeType(index) {
      if (this.currentIndex === index) return;
      this.currentIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./learningRecords.scss";
</style>
